<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杰哥的登录</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 style="text-align:center">聊天室</h1>
<div id='output' style="border:1px solid black;width: 300px;height: 500px;">
    
</div>
<div class="text-center">
   <span id='username'></span>:<input type="text" name="" class="form-controller">
    <button id='button' type="button" class='btn btn-default'>发送</button>
</div>

<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</body>
</html>
<script type="text/javascript">
      var ws = new WebSocket("ws://127.0.0.1:6666");

      ws.onopen = function(){
      		alert('连接成功!');
      }
      
	  	ws.onmessage = function(res){
	  		// console.log(res.data);
	  		 var zxj = eval("("+res.data+")");
	  		 console.log(zxj);
	  		 if(zxj.type==="say"){

	  		 	$('#username').html(zxj.username); 	
	  			$('#output').append("<p>"+zxj.username+':'+zxj.content+"</p>"); 	

	  		 }
	  			

	  	}

       var username = "zxj";

		$('#button').click(function(){
			var input = $('input[type=text]').val();
	    	var text = '{"type":"say","mes":"'+input+'","username":"'+username+'"}';
	    	ws.send(text);
	    });






 /*if(window.WebSocket){
        console.log('This browser supports WebSocket');
    }else{
        console.log('This browser does not supports WebSocket');
    }

    var wsUri ="ws://127.0.0.1:6666"; 
    var output;  
    
    function init() { 
        output = document.getElementById("output"); 
        testWebSocket(); 

    }  
 
    function testWebSocket() { 
        websocket = new WebSocket(wsUri); 
        websocket.onopen = function(evt) { 
            alert('连接成功！');
        }; 
        websocket.onclose = function(evt) { 
            //onClose(evt) 
            alert('已断开');
        }; 
        websocket.onmessage = function(evt) { 
            alert(evt);
        }; 
        // websocket.onerror = function(evt) { 
        //     onError(evt) 
        // }; 


    }  
 
 	 function doSend(message) { 
        writeToScreen("SENT: " + message);  
        websocket.send(message); 
    }  
 
    function writeToScreen(message) { 
        var pre = document.createElement("p"); 
        pre.style.wordWrap = "break-word"; 
        pre.innerHTML = message; 
        output.appendChild(pre); 
    } 
   
    window.addEventListener("load", init, false);  */
</script>